<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-cache/no-store" />
  <!--[if lt IE 9]>
<script src="lib/html5shiv.js"></script>
<script src="lib/respond.min.js"></script>
<![endif]-->
  <style type="text/css">
    body {
      height: 100%;
    }

    .modal-dialog {
      width: 1000px;
    }

    .input-text {
      width: 150px;
    }

    .materialTypeFont {
      font-size: 20px;
      max-width: 20em;
    }

    .materialProcedure {
      display: flex;
      flex-wrap: nowrap;
    }

    .materialProcedure .pro-item {
      margin-right: 10px;
      font-size: 15px;
    }

    .materialProcedure .pro-item>div {
      border: 1px solid #dddddd;
      border-top: none;
      white-space: nowrap;
    }

    .materialProcedure .pro-item>div:first-child {
      border-top: 1px solid #dddddd;
    }

    .materialProcedure .pro-item>div.has-same-process {
      border-top: 1px solid #dddddd;
    }

    .pro-item .item-title {
      font-size: 20px;
    }

    .procedureFont {
      font-size: 15px;
    }

    .pro-content {
      overflow: auto;
      height: calc(100% - 75px);
      position: relative;
    }

    .pro-content>* {
      position: absolute;
    }

    @media print {
      .pro-content {
        overflow: visible !important;
      }
    }

    .page-container.save-img{
      overflow: visible !important;
      width: auto;
    }

    .page-container.save-img #order-app{
      white-space: nowrap;
    }

    .page-container.save-img .pro-content{
      width: 0;
      height: 0;
      overflow: visible !important;
    }
  </style>
  <!--[if IE 6]>
<script src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
  <title>配件工艺工序设置</title>
</head>

<body>
  <!--主内容-->
  <div class="page-container col-md-12" style="height:100%;padding-bottom:0;">
    <div class="text-l clearfix" id="order-app" v-loading.fullscreen.lock="loading">
      <div style="float: left;">
        <span>订单号：</span>
        <page-select v-if="printMode==='edit'" filterable v-model="orderId" :options="orderList" style="width:160px" size="small"
          value-field="orderId" label-field="orderId" :filter-method="filterOrderId">
          <template slot-scope="scope">
            <el-option v-for="order in scope.options" :key="order.orderId" :value="order.orderId" :label="order.orderId">
              <div class="order-select-option">
                <div style="min-width:145px">{{order.orderId}}</div>
                <div style="min-width:145px">{{order.companyOrderId}}</div>
                <div style="min-width:110px">{{order.factoryId}}</div>
                <div style="min-width:50px">{{order.coustomId}}</div>
              </div>
            </el-option>
          </template>
        </page-select>
        <span v-else>{{pageOrderId}}</span>
        <span class='title'>排序：</span><select id="sort" class='input-text title' style='width:120px;'>
          <option value='defaultSort'>默认排序</option>
          <option value='firstSort'>排序一</option>
          <option value='secondSort'>排序二</option>
          <option value='thirdSort'>排序三</option>
        </select>
        <button id="queryOrderMaterialProcedureBtn" class=" btn btn-primary radius title">自动排序</button>
        <button id="saveBtn" class=" btn btn-primary radius title">保存</button>
        <button id="queryBtn" class=" btn btn-primary radius title">查询</button>
        <button id="editMaterialProcedureBtn" class=" btn btn-primary radius hidden title">编辑</button>
        <button id="deleteTreeBtn" class=" btn btn-primary radius hidden title">删除</button>
        <button id="autoSchedulingBtn" class=" btn btn-primary radius hidden title">排期</button>
        <button id="printBtn" class=" btn btn-primary radius title">打印</button>
        <button id="exportExcleBtn" class=" btn btn-primary radius title">导出为excel</button>
        <span class='print'></span>
        <span>工序总数：<span class="procedureSumCount">0</span></span></span>
        <span style='color:red' class='title'>提示：当输入的订单信息有多条时，取最后一条,当物料没有对应工序时代表不加工，保存时不会保存改物料</span>
        <span v-if="diffDay!==null">生产周期：{{diffDay}}</span>
      </div>
    </div>

    <div class="mt-20 pro-content">
      <canvas class="materialFlow"></canvas>
      <div class="materialProcedure">

      </div>
    </div>
  </div>

  <div class="modal fade" id="setCombinationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <span>订单编号：</span><span id="modalOrderId" style='color:red'></span>
          <span>物料类型：</span><select id="materialType" class='input-text'>
            <option value=''>请选择</option>
          </select>
        </div>
        <div class="modal-body">
          <div id="selectTitle" class="list-select ui-draggable">
            <div class="list-title ui-draggable-handle">
              <input type="text" class="input-text" placeholder="工序名称" id="setSearchWhereInput" style="width:200px;"><button class="btn btn-primary"
                id="setSearchWhereBtn">搜索</button>
            </div>
            <div class="list-body">
              <ul class="item-box left-box ui-sortable ui-droppable">
              </ul>
              <div class="center-box">
                <button class="add-one btn btn-success radius" title="添加选中项">&gt;</button>
                <button class="add-all btn btn-success radius" title="添加全部">&gt;&gt;</button>
                <button class="remove-one btn btn-primary radius" title="移除选中项">&lt;</button>
                <button class="remove-all btn btn-primary radius" title="移除全部">&lt;&lt;</button>
              </div>
              <ul class="item-box right-box ui-sortable ui-droppable">

              </ul>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="setCombinationModalBtn">确定</button>
        </div>
      </div>
    </div>
  </div>
</body>

<!--_footer 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="../leftAndRight/list-style.css" />
<link rel="stylesheet" type="text/css" href="../static/element-ui/theme-chalk/index.css" />
<link rel="stylesheet" type="text/css" href="../vueSystem/components/css/pageSelect.css" />

<script src="https://upload.shinehao.com.cn/20180810145355jquery.min1.9.1.js"></script>
<script src="../lib/layer/2.4/layer.js"></script>
<script src="https://upload.shinehao.com.cn/20180810150731H-ui.min3.0.2.js"></script>
<script src="https://upload.shinehao.com.cn/20180813175723jquery.dataTables1.10.0.js"></script>
<script src="../lib/datatables/1.10.0/dataTables.fixedColumns.min.js"></script>
<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190416085621dom-to-image.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809103833lodash.js"></script>
<script src="https://upload.shinehao.com.cn/20190514110446vue.min.v2.6.10.js"></script>
<script src="https://upload.shinehao.com.cn/20191112090556element-ui2.11.1(revised).js"></script>
<script src="../vueSystem/js/request.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script src="../vueSystem/js/sysUtil.js"></script>
<script src="../vueSystem/components/pageSelect.js"></script>
<script src="https://upload.shinehao.com.cn/20180809103828moment.js"></script>
<script src="../lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script src="../lib/laypage/1.2/laypage.js"></script>
<script src="https://upload.shinehao.com.cn/20180810172341echarts.common.min3.4.0.js"></script>
<script src="../leftAndRight/jquery-ui.min.js"></script>
<script src="../myJs/echartUtil.js"></script>
<script src="../myJs/util.js"></script>
<script src="js/orderProcedure.js"></script>

<style>
.order-select-option{
  display: flex;
}
</style>

</html>